<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" id="vp" content="width=device-width, initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
		<title>邀请家人</title>
		<link href="../../../css/style.css" rel="stylesheet" type="text/css">
		<link href="../../../css/mui.css" rel="stylesheet" type="text/css">
		<style>
			body {
				overflow: hidden !important;
				background: #fff!important;
			}
			
			.father {
				width: 100%;
				text-align: center;
				color: #7d7c7c;
				padding: 0 20%;
				margin-top: 20px;
			}
			
			.father>span {
				text-align: center;
				display: inline-block;
				width: 25%;
				position: relative;
			}
			
			.father span img {
				width: 100%;
				display: inline-block;
				padding-bottom: 10px;
			}
			
			.state {
				border: solid 1px #fd5c65;
				border-radius: 10px;
				position: absolute;
				padding: 0 5px;
				font-size: 10px;
				background: #fff;
				height: 15px;
				line-height: 15px;
				color: #fd5c65;
				top: 46%;
				left: 0;
				width: 100%;
			}
			
			.fathersfather {
				width: 100%;
				margin: 0 10%;
				margin-top: 10px;
			}
			
			.fathersfather span {
				float: left;
				width: 16%;
				margin-right: 5%;
				text-align: center;
				position: relative;
			}
			
			.fathersfather span img {
				width: 100%;
				padding-bottom: 10px;
			}
			
			.tianjai {
				border-radius: 10px;
				position: absolute;
				padding: 0 5px;
				font-size: 10px;
				background: #fd5c65;
				height: 15px;
				line-height: 15px;
				color: #fff;
				top: 47%;
				left: 0;
				width: 100%;
			}
			
			.invite {
				overflow: hidden;
				background: #fff;
				
				
			}
			
			.invitetypebtn {
				width: 100%;
				padding: 0 10%;
			}
			
			#weixininvite {
				text-align: center;
				background: #32cd45;
				height: 40px;
				color: #fff;
				line-height: 40px;
				border-radius: 20px;
				margin: 10px 0 15px 0;
			}
			
			#telinvite {
				text-align: center;
				color: #50addb;
			}
			
			.gongxian {
				margin: 0 20px;
			}
			
			.gongxian .title {
				padding: 10px 0 10px 10px;
				font-size: 16px;
			}
			
			.ul1 li {
				line-height: 40px;
			}
			
			.ul2 li span {
				border: solid 1px #00a0e9;
				border-radius: 20px;
				color: #00a0e9;
				padding: 5px 10px;
			}
			
			.ul2 .mui-pull-right {
				margin-top: 12px;
			}
			
			#weixinBox {
				position: fixed;
				width: 100%;
				height: 100%;
				background: rgba(0, 0, 0, .5);
				top: 0;
				left: 0;
				text-align: center;
				display: none;
			}
			
			.weixinBoxContent {
				width: 100%;
				background: #fff;
				border-top-left-radius: 20px;
				border-top-right-radius: 20px;
				z-index: 9999;
				position: absolute;
				bottom: 0;
				padding: 20px 0px 0 0px;
			}
			
			#weixinBox img {
				display: inline-block;
				width: 1.5rem;
				padding: 10px 0;
			}
			
			.weixinBoxContent .tel {
				position: absolute;
				right: 10px;
				margin-top: -40px;
				color: #1bb7fd;
				font-size: 14px;
			}
			
			.weixinBoxContent .content {
				padding: 0 10px;
			}
			
			.cancel {
				border-top: solid 1px #dfdfdf;
				height: 50px;
				line-height: 50px;
			}
			.mui-radio{
				padding-bottom: 10px ;
				border-bottom: solid 1px #dfdfdf;
				padding-left: 10px;
				padding-top: 10px;
			}
			.mui-radio img{
				width: 50px;
				float: left;
				margin-right: 10px;
			}
			.mui-radio label{
				padding: 0;
				height: 50px;
				line-height: 50px;
				font-size: 14px;
			}
			.mui-radio label .bind{
				
				border-radius: 10px;
				width: 60px;
				display: inline-block;
				height: 20px;
				line-height: 20px;
				text-align: center;
				margin-left: 20px;
				color: #7B7B7B;
			}
			.mui-radio input[type='radio'], .mui-checkbox input[type='checkbox']{
				top: 25px;
				color:#fd5c65;
				width: 20px;
				height: 20px;
				
			}
			.mui-radio input[type=radio]:checked:before {content: '\e442';color:#fd5c65;} 
			.mui-radio input[type='radio']:before{
				font-size: 20px;
			}
			.green{ 
				border: solid 1px #32cd45!important;
			}
			.red{
				border: solid 1px #fd5c65;
			}
		</style>
	</head>

	<body>
		<div class="invite" id="invite">
			<div class="mui-input-row mui-radio" v-for="item in items">
				<label>
					<img :src="item.pic" />
					<span class="relation">{{item.name}}</span>
					<span class="bind red" v-if="item.status==0">未绑定</span>
					<span class="bind green" v-if="item.status==1">已绑定</span>
					<input class="radio" value="Item1" name="radio1" type="radio" v-if="item.status==0">
				</label>
			</div>
			<!--<<div id="jiaren">
				<div class="father">
					<span class="fl"><label><img src="../../../images/father_03.png" /><div class="name">爸爸<div class="mui-input-row mui-radio">
				 		<input name="checkbox1" value="Item1" type="radio" class="check" >
					</div></div>
					<div class="tianjai"></div></label></span>
					<span class="fr"><label><img src="../../../images/mam_03.png" /><div class="name">妈妈<div class="mui-input-row mui-radio">
				 		<input name="checkbox1" value="Item2" type="radio" class="check" >
					</div></div>
					<div class="state"></div></label></span>
					</span>
				</div>
				<div class="clear"></div>
				<div class="fathersfather">
					<span><label><img src="../../../images/yeye_07.png" /><div class="name">爷爷<div class="mui-input-row mui-radio">
				 		<input name="checkbox1" value="Item3" type="radio" class="check">
					</div></div><div class="state"></div></label></span>
					<span><label><img src="../../../images/nai_07.png" />
					<div class="name">奶奶<div class="mui-input-row mui-radio">
				 			<input name="checkbox1" value="Item4" type="radio" class="check">
						</div>
					</div><div class="state"></div></label></span>
					<span><label><img src="../../../images/laoye_07.png" /><div class="name">姥姥<div class="mui-input-row mui-radio">
				 		<input name="checkbox1" value="Item5" type="radio" class="check" >
					</div></div><div class="state"></div></label></span>
					<span><label><img src="../../../images/laolao_07.png" /><div class="name">姥爷<div class="mui-input-row mui-radio">
				 		<input name="checkbox1" value="Item6" type="radio" class="check" >
					</div></div><div class="state"></div></label></span>
					<div class="clear"></div>
				</div>
			</div>>-->
			
			<div class="invitetypebtn">
				<div id="weixininvite" @tap="telinvite()">微信邀请</div>
			</div>
			<!--div class="gongxian">
				<div class="title">积分贡献</div>
				<ul class="mui-table-view ul1">
					<li class="mui-table-view-cell mui-media">
						<a href="javascript:;" class="integralContent">
							<img class="mui-media-object mui-pull-left" :src="items.member_avatar">
							<div class="mui-media-body mui-pull-left">
								{{items.member_name}}
							</div>
							<div class="mui-media-body mui-pull-right">
								{{items.integral}}
							</div>
						</a>
						<div class="clear"></div>
					</li>
				</ul>
			</div-->
			<div id="weixinBox">
				<div class="weixinBoxContent">
					<div class="title" id="title"></div>
					<div class="content" id="content"></div>
					<img src="../../../images/weixinimg_03.jpg" />
					<div class="tel" @tap="telinvite()">手机号邀请</div>
					<div class="cancel" id="cancel">取消</div>
				</div>
			</div>
		</div>
		<script src="../../../js/mui.js"></script>
		<script src="../../../js/vue.min.js"></script>
		<script src="../../../js/jquery-1.8.3.min.js"></script>
		<script src="../../../js/app.js"></script>
		<script src="../../../js/token.js"></script>
		<script>
			mui.init();
			var uid = "";
			var state = '';
			mui.plusReady(function() { 
				
				state = app.getState();
				uid = state.userid;
				memberToken = state.memberToken;
				childid = state.childid;
				 
				mui.post(Apiurl+'index/yaoqinglist', {
					uid: uid,
					memberToken:memberToken,
					child_id:childid
				}, function(data) {
			  
					invite.items=data;
				
				}, 'json')
			})
			var invite = new Vue({
				el: '#invite',
				data: {
					items: [],
					bindstatus:[]
				},
				methods: {
					telinvite: function() {
						var a = 0;
						var choosefam = '';
						mui('.radio').each(function() {
							if(this.checked) {
								relationship = this.previousElementSibling.previousElementSibling.innerText;
								relationshipisea = this.value   ;
								a = 1
							}
						})
							if(a == 1) {
								mui.openWindowWithTitle({
								url:'./telinvite.html',
								id: 'telinvite',
								extras: {
									relationship: relationship,
									relationshipisea:relationshipisea
								},
								createNew: true,
								styles: {
									"render": "always",
									"popGesture": "hide",
									"bounce": "vertical",
									"bounceBackground": "#efeff4",
									"titleNView": { //详情页原生导航配置
										backgroundColor: '#25aae3', //导航栏背景色
										titleText: '添加家人', //导航栏标题
										titleColor: '#ffffff', //文字颜色
										autoBackButton: true, //自动绘制返回箭头 
										splitLine: { //底部分割线
											color: '#cccccc'
										}
									}
								},
							});
						} else {
							plus.nativeUI.toast('请先选择您要邀请的家人', {
								verticalAlign: 'middle'
							});
						}
					},
					weixin: function() {
						document.getElementById('weixinBox').style.display = 'block';
						var name = $(this).find('.name').html();
						document.getElementById('title').innerHTML = "邀请家人朋友加入亲友团";

					}
				}
			});
			mui('.fathersfather').on('tap', 'span', function() {

			})
			document.getElementById('cancel').addEventListener('tap', function() {
				document.getElementById('weixinBox').style.display = 'none';
			})

			function openShare() {
				shareWebview();
			}
			mui.plusReady(function() {
				ws = plus.webview.currentWebview();
				//关闭splash页面；
				plus.navigator.closeSplashscreen();
			})
			var sharew;
			var ws = null;
			/**
			 *分享窗口
			 */
			function shareWebview() {
				ws = plus.webview.currentWebview();
				if(sharew) { // 避免快速多次点击创建多个窗口
					return;
				}
				var top = plus.display.resolutionHeight - 134;
				var href = "share.html";
				sharew = plus.webview.create(href, "inviteshare.html", {
					width: '100%',
					height: '134',
					top: top,
					scrollIndicator: 'none',
					scalable: false,
					popGesture: 'none'
				}, {
					shareInfo: {
						"href": "www.baidu.com",
						"title": "1",
						"content": "1",
						"pageSourceId": ws.id
					}
				});
				sharew.addEventListener("loaded", function() {
					sharew.show('slide-in-bottom', 300);
				}, false);
				// 显示遮罩层  
				ws.setStyle({
					mask: "rgba(0,0,0,0.5)"
				});
				// 点击关闭遮罩层
				ws.addEventListener("maskClick", closeMask, false);
			}

			function closeMask() {
				ws.setStyle({
					mask: "none"
				});
				//避免出现特殊情况，确保分享页面在初始化时关闭 
				if(!sharew) {
					sharew = plus.webview.getWebviewById("share.html");
				}
				if(sharew) {
					sharew.close();
					sharew = null;
				}
			}
			window.addEventListener('refreshinvite',function(){
				//alert(1)
				mui.post(Apiurl+'index/yaoqinglist', {
					uid: uid,
					memberToken:memberToken,
					child_id:childid
				}, function(data) {
					
					invite.items=data;
				}, 'json')
			})
			//切换孩子
		window.addEventListener('changeChild', function(event) {
			var childid = event.detail.changeChild;
			mui.post(Apiurl+'index/yaoqinglist', {
					uid: uid,
					memberToken:memberToken,
					child_id:childid
				}, function(data) {
			  
					invite.items=data;
				
				}, 'json')
		});
		 //处理返回键
        var backButtonPress = 0;
        mui.back = function(event) {
            var ws = plus.webview.currentWebview()
            if (ws) {
                ws.close();
            } else {
                backButtonPress++;
                if (backButtonPress > 1) {
                    plus.runtime.quit();
                } else {
                    plus.nativeUI.toast('再按一次退出应用');
                }
                setTimeout(function() {
                    backButtonPress = 0;
                }, 1000);
                return false;
            }
        };
		</script>
	</body>

</html>